<style lang="scss" scoped>
  @import '../assets/css/mixin.scss';

  .scenery-img {
    height: 35vw;
    width: 90vw;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .box {
      position: absolute;
      bottom: 0;
      padding: 1.2vw;
      width: 100%;
      font-size: 3vw;
      background: rgba(0,0,0,.6);
    }
  }
</style>

<template lang="pug">
  .scenery-img
    img(:src="img.src")
    .box
      p.fff.ellipsis {{img.text}}
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'

  export default {
    name: "scenery-img",
    props:['img'],
    data() {
      return {}
    },
    computed: {
      ...mapState([]),
      ...mapGetters([]),

    },
    methods: {
      ...mapMutations([]),

    },
    created() {

    },
    mounted() {

    }
  }
</script>

